import React, { useEffect } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { CloseOutlined } from '@ant-design/icons/lib'

interface IModalViewProps {
    expends?: boolean
    onClose?: () => void
    children?: any
}

export default function ModalView(props: IModalViewProps) {
    useEffect(() => {
        $('#root').addClass('prohibit')
    }, [])

    return (
        <div
            className={style.container}
            onClick={() => {
                if (props.onClose) {
                    $('#root').removeClass('prohibit')
                    props.onClose()
                }
            }}>
            <div
                className={style.icon}
                onClick={() => {
                    if (props.onClose) props.onClose()
                }}>
                <CloseOutlined />
            </div>
            <div id="modal__content" className={style.content} onClick={e => e.stopPropagation()}>
                {props.children}
            </div>
        </div>
    )
}
